<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            overflow-x: hidden;
            padding-bottom: 60px;
        }
        .search-bar {
            background-color: #0052d9;
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
        }
        .search-input {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 8px 16px;
            color: white;
            display: flex;
            align-items: center;
            flex: 1;
            margin-right: 12px;
        }
        .search-input i {
            margin-right: 8px;
            color: rgba(255, 255, 255, 0.8);
        }
        .search-input input {
            background: transparent;
            border: none;
            color: white;
            flex: 1;
            outline: none;
        }
        .search-input input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .cart-icon {
            color: white;
            font-size: 20px;
            position: relative;
        }
        .cart-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ff4d4f;
            color: white;
            font-size: 10px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .category-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            padding: 16px;
            background-color: white;
            gap: 12px;
        }
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .category-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0052d9;
            margin-bottom: 8px;
        }
        .category-name {
            font-size: 12px;
        }
        .banner {
            padding: 12px 16px;
        }
        .banner-image {
            width: 100%;
            height: 120px;
            border-radius: 8px;
            object-fit: cover;
        }
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            font-weight: bold;
        }
        .section-more {
            color: #0052d9;
            font-size: 14px;
            font-weight: normal;
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 0 16px 16px;
        }
        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .product-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
        }
        .product-tag {
            display: inline-block;
            background-color: rgba(0,82,217,0.1);
            color: #0052d9;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 10px;
            margin-right: 4px;
        }
        .flash-sale {
            background: linear-gradient(90deg, #ff4d4f 0%, #ff7a45 100%);
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            margin: 0 16px 16px;
        }
        .flash-sale-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .flash-sale-title {
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .flash-sale-title i {
            margin-right: 6px;
        }
        .flash-sale-timer {
            display: flex;
            align-items: center;
            font-size: 12px;
        }
        .timer-box {
            background-color: rgba(0,0,0,0.2);
            padding: 2px 4px;
            border-radius: 2px;
            margin: 0 2px;
        }
        .flash-sale-products {
            display: flex;
            overflow-x: auto;
            padding-bottom: 8px;
            -webkit-overflow-scrolling: touch;
        }
        .flash-product {
            background: white;
            border-radius: 6px;
            width: 100px;
            margin-right: 8px;
            flex-shrink: 0;
            overflow: hidden;
        }
        .flash-product-image {
            width: 100%;
            height: 100px;
            object-fit: cover;
        }
        .bottom-nav {
            border-top: 1px solid #eee;
            background: white;
            padding: 8px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .bottom-nav-item.active {
            color: #0052d9;
        }
    </style>
</head>
<body>
    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="search-input">
            <i class="t-icon t-icon-search"></i>
            <input type="text" placeholder="搜索商品">
        </div>
        <div class="cart-icon">
            <i class="t-icon t-icon-cart"></i>
            <span class="cart-badge">3</span>
        </div>
    </div>
    
    <!-- 商品分类 -->
    <div class="category-grid">
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-shop"></i>
            </div>
            <span class="category-name">全部商品</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-tea"></i>
            </div>
            <span class="category-name">茶叶</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-gift"></i>
            </div>
            <span class="category-name">伴手礼</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-coffee"></i>
            </div>
            <span class="category-name">特产</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-heart"></i>
            </div>
            <span class="category-name">养生</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-discount"></i>
            </div>
            <span class="category-name">优惠</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-ticket"></i>
            </div>
            <span class="category-name">门票</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-home"></i>
            </div>
            <span class="category-name">民宿</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-calendar"></i>
            </div>
            <span class="category-name">新品</span>
        </div>
        <div class="category-item">
            <div class="category-icon">
                <i class="t-icon t-icon-more"></i>
            </div>
            <span class="category-name">更多</span>
        </div>
    </div>
    
    <!-- 广告横幅 -->
    <div class="banner">
        <img src="https://images.unsplash.com/photo-1534723452862-4c874018d66d" alt="商城促销" class="banner-image">
    </div>
    
    <!-- 限时抢购 -->
    <div class="flash-sale">
        <div class="flash-sale-header">
            <div class="flash-sale-title">
                <i class="t-icon t-icon-alarm"></i>
                <span>限时抢购</span>
            </div>
            <div class="flash-sale-timer">
                <span>距结束</span>
                <span class="timer-box">01</span>
                <span>:</span>
                <span class="timer-box">45</span>
                <span>:</span>
                <span class="timer-box">32</span>
            </div>
        </div>
        <div class="flash-sale-products">
            <div class="flash-product">
                <img src="https://images.unsplash.com/photo-1546342278-5f45a47e1a0e" class="flash-product-image" alt="贵州茶叶">
                <div class="p-2">
                    <div class="text-xs line-clamp-1">贵州高山绿茶</div>
                    <div class="text-red-500 font-bold mt-1">¥39.9</div>
                </div>
            </div>
            <div class="flash-product">
                <img src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e" class="flash-product-image" alt="辣椒酱">
                <div class="p-2">
                    <div class="text-xs line-clamp-1">贵州老干妈辣椒酱</div>
                    <div class="text-red-500 font-bold mt-1">¥15.8</div>
                </div>
            </div>
            <div class="flash-product">
                <img src="https://images.unsplash.com/photo-1582450871972-ab5ca641643d" class="flash-product-image" alt="蜂蜜">
                <div class="p-2">
                    <div class="text-xs line-clamp-1">野生百花蜂蜜</div>
                    <div class="text-red-500 font-bold mt-1">¥68.0</div>
                </div>
            </div>
            <div class="flash-product">
                <img src="https://images.unsplash.com/photo-1563865436874-9aef32095fad" class="flash-product-image" alt="酸汤鱼调料">
                <div class="p-2">
                    <div class="text-xs line-clamp-1">酸汤鱼调料包</div>
                    <div class="text-red-500 font-bold mt-1">¥12.9</div>
                </div>
            </div>
            <div class="flash-product">
                <img src="https://images.unsplash.com/photo-1584559582128-b8be739912e1" class="flash-product-image" alt="腊肉">
                <div class="p-2">
                    <div class="text-xs line-clamp-1">贵州烟熏腊肉</div>
                    <div class="text-red-500 font-bold mt-1">¥59.9</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 热卖商品 -->
    <div class="section-title">
        <span>热卖商品</span>
        <span class="section-more">查看全部</span>
    </div>
    
    <div class="product-grid">
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1565071559227-20451283c40c" class="product-image" alt="贵州茅台镇酱香酒">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">正品保障</span>
                    <span class="product-tag">满减</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州茅台镇酱香型白酒 53度纯粮食原浆酒</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥198.00</div>
                    <div class="text-xs text-gray-500">已售1280件</div>
                </div>
            </div>
        </div>
        
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1582107208835-d5b97e7680c3" class="product-image" alt="贵州黑茶">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">有机</span>
                    <span class="product-tag">包邮</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州黑茶特级正宗都匀毛尖茶叶礼盒装</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥128.00</div>
                    <div class="text-xs text-gray-500">已售856件</div>
                </div>
            </div>
        </div>
        
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1563865436874-9aef32095fad" class="product-image" alt="酸汤鱼调料">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">特产</span>
                    <span class="product-tag">新品</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州特产黄果树酸汤鱼调料 正宗苗家酸汤鱼底料</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥29.90</div>
                    <div class="text-xs text-gray-500">已售2156件</div>
                </div>
            </div>
        </div>
        
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1584559582128-b8be739912e1" class="product-image" alt="腊肉">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">生鲜</span>
                    <span class="product-tag">限时</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州特色农家自制烟熏腊肉 农家土猪肉腊肠</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥89.00</div>
                    <div class="text-xs text-gray-500">已售763件</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 特色商品 -->
    <div class="section-title">
        <span>康养特色</span>
        <span class="section-more">查看全部</span>
    </div>
    
    <div class="product-grid">
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1611078489935-0cb964de46d6" class="product-image" alt="养生茶">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">养生</span>
                    <span class="product-tag">礼盒</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州苗族养生茶 野生金银花茶组合装</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥158.00</div>
                    <div class="text-xs text-gray-500">已售432件</div>
                </div>
            </div>
        </div>
        
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1559056199-641a0ac8b55e" class="product-image" alt="艾草香包">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">手工</span>
                    <span class="product-tag">驱蚊</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州民族特色艾草香包 手工刺绣驱蚊包</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥39.90</div>
                    <div class="text-xs text-gray-500">已售621件</div>
                </div>
            </div>
        </div>
        
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1582450871972-ab5ca641643d" class="product-image" alt="蜂蜜">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">纯天然</span>
                    <span class="product-tag">滋补</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州深山野生百花蜂蜜 天然农家自产蜂蜜</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥98.00</div>
                    <div class="text-xs text-gray-500">已售892件</div>
                </div>
            </div>
        </div>
        
        <div class="product-card">
            <img src="https://images.unsplash.com/photo-1555848962-6e79363ec58f" class="product-image" alt="足浴包">
            <div class="p-2">
                <div class="flex mb-1">
                    <span class="product-tag">草药</span>
                    <span class="product-tag">足浴</span>
                </div>
                <h3 class="text-sm font-medium line-clamp-2">贵州苗医足浴包 纯天然草药泡脚包 10包装</h3>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-bold">¥69.00</div>
                    <div class="text-xs text-gray-500">已售526件</div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html> 